<template>
  <div class="container">
    <ul>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/telTag.png"/>
        <input type="text" name="account" v-model="phone" placeholder="请输入账号">
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/passwordTag.png"/>
        <input type="password" name="password"  v-model="password" placeholder="请输入密码">
      </li>
      <div class="tip">
        <!-- <input type="checkbox" name="auto">
        <span>下次自动登陆</span> -->
        <span @click="forgetKey">忘记密码</span>
      </div>
      <div class="login" @click="doLogin">登陆</div>
      <div class="register">
        <router-link to="/register">
          立即注册
        </router-link>
      </div>
    </ul>
  </div>
</template>

<script>
import { Toast } from 'vant';
  export default {
    data() {
      return {
        phone: '',
        password: '',
      }
    },

    components: {},

    methods: {
      async doLogin() {
        if(!this.phone) {
          this.$toast.fail('请输入账号');
          return
        }
        if(!this.password) {
          this.$toast.fail('请输入密码');
          return
        }
        let r=await this.$axios.post('/auth/webLogin', {
            phone: this.phone,
            password: this.password,  
        })
        window.localStorage.setItem('userToken',r.data.user_token);
        if(r.data.level=='success'){
          Toast({message:'登录成功！',duration:1000});
          setTimeout(()=>{this.$router.push({name:'home'})},1100)
        }else{
          Toast('账号或密码输入错误！');
        }
        // .then(r=> {
        //   window.localStorage.setItem('userToken','r.user_token')
        //   if(r.data.level=='success'){
        //     Toast('登录成功！');
        //     setTimeout(()=> Promise.resolve(),1500)
        //     }else{
        //       return Promise.reject()
        //     }
        // }).then(()=>{
        //   this.$router.push({name:'home'})
        // }).catch((err)=>{
        //   Toast('账号或密码输入错误！');
        // })

      },
      forgetKey(){
        this.$router.push('forgetLogin')
      }
    },
  }
</script>

<style scoped>
  .container {
    color: #666666;
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
    margin-top:20px;
  }
  ul{
    margin:0 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
  }
  ul li {
    width: 100%;
    height: 52px;
    display: flex;
    border-bottom: 1px solid #F8F8FB
  }

  ul li img {
    width: 26px;
    height: 26px;
    margin-top: 13px;
  }

  ul li input {
    height: 30px;
    margin-top: 12px;
    margin-left: 10px;
    display: block;
    flex: 1;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0 10px;
  }

  .tip {
    width: 100%;
    height: 52px;
  }

  input {
    border-radius:5px;
    border-color:gray
  }

  .tip span {
    line-height: 52px;
  }

  .tip span:nth-of-type(2) {
    float: right;
  }

  .login {
    width: 300px;
    background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);
    height: 50px;
    line-height: 50px;
    color: #fff;
    border-radius: 5px;
    font-size: 20px;
    text-align: center;
  }

  .register {
    width: 100px;
    height: 40px;
    margin: 30px auto;
    border: 1px solid #0180cf;;
    border-radius:5px;
    text-align: center;
    line-height: 40px;
    color: #0180cf;;
    font-size: 15px;
  }
  .register a {
    color: #0180cf;;
  }
</style>
